<template>
    <div>
        <div class="content2">
                <div class="right1">
                    <div class="tit"></div>
                    <div class="tit-">
                        <div class="tit-1">姓名</div>

                        <div class="tit-2">性别</div>
                        <div class="tit-3">年龄</div>
                        <div class="tit-4">身份证号</div>
                        <div class="tit-5">地址</div>
                        <div class="tit-6">手机号</div>
                        <div class="tit-7">工种</div>
                     
                    </div>

                    <div class="cell">

                        <div id="schart15" :style="{ marginTop: marginTop + 'px' }">
                            <li class="li1" v-for="(value, index) in realData" :key="index" >
                                <div class="name1">{{ value.staff_name }}</div>
                                <div class="name2">{{ value.staff_sex }}</div>
                                <div class="name3">{{ value.staff_age }}</div>
                                <div class="name4">{{ value.staff_card }}</div>
                                <div class="name5">{{ value.staff_address }}</div>
                                <div class="name6">{{ value.staff_phone }}</div>
                                <div class="name7">{{ value.worktype_name }}</div>
                                
                              
                            </li>
                        </div>
                        <!-- <div id="schart155" :style="{ marginTop1: marginTop1 + 'px' }">
                            <li class="li1" v-for="(value, index) in realData" :key="index"  @click="handleUpdate(index)">
                                <div class="name1">{{ value.contentA }}</div>
                                <div class="name2">{{ value.contentB }}</div>
                                <div class="name3">{{ value.contentC }}</div>
                                <div class="name4">{{ value.contentD }}</div>
                                
                            </li>
                        </div> -->

                    </div>
                    

                </div>
            </div>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },
    methods: {

    },
    data() {
        return {
            realData:[],
  marginTop: 0, // 数据的margin-top
            marginTop1: 0,
        }
        },
         created() {
        // this.timer = setInterval(this.showNotice, 100); //100表示间隔时间，数字越大滚得越快
         this.timer=setInterval(this.fun,1);
    },
        methods:{
fun(){
            var me = this;
            this.marginTop1 = me.datacount * 150+818;
            this.marginTop -= 0.1;
            this.marginTop1 -= 0.1;
            var count = me.datacount * 150;
            if (this.marginTop < -count) {
              
                this.marginTop = 0;
                this.marginTop1 = me.datacount * 150+818;
            }
        },
        },
        mounted(){
            var me =this
             ajax('staff/FindStaffBySectionId', { section_id:3 }, function (data) {
                 console.log(data);
                //  console.log(data[0].staff_phone);
                 var tel;
                 var sf;
                 var reg;
                  var reg1;
                 for (var item of data) {
                //  console.log(item.staff_phone);
                  tel = item.staff_phone 
                    reg = /^(\d{7})\d{4}$/; 
                   tel= tel.replace(reg, "$1****");

                     sf=item.staff_card
                    if(sf!=null){
                         sf = sf.substr(0,14)+"****"
                    }else{
                        sf=""
                    }

                  


                  item.staff_phone =tel
                   item.staff_card =sf
                  console.log(sf);

           console.log(item.staff_phone);
                 
                    
}
            me.datacount = data.length;
           
            me.realData = data;
        })
        }
}
</script>
<style scoped>
.li1{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 50px;
    list-style: none;
    color: rgba(215, 244, 255, 1);
    font-size: 18px;
    border-bottom: 1px solid #68b7d6;
}

#schart15 {
    /* float: left; */
    width: 1860px;
    
    /* height: 818px; */
    /* position: absolute;
    top:0; */
    /* background: cyan; */
    /* background: rgb(127, 127, 212); */
}
#schart155 {
    float: left;
    width: 1900px;
    
}
.cell {
    /* float: left; */
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 818px;
    overflow: hidden;
    overflow-y: auto;
}
.name1,
.name2,
.name4,
.name5,
.name3 {
    float: left;
    /* height: 140px; */
    /* text-align: center; */
    position: relative;
    top: 10%;
    transform: translateY(-50%);
    /* line-height: 150px; */
}
.name1 {
    width: 10%;
    margin-left: 50px;
    /* line-height: 75px; */
}
.name2 {
    width: 10%;
    
}

.name5 {
    align-items: center;
   width: 20%;
    padding:0 20px;
    /* line-height: 50px; */
}
.name3 {
   
    width: 10%;
    
}
.name6 {
   
    width: 10%;
    
}
.name7 {
   text-align: center;
    width: 10%;
    
}
.name4 {
    float: left;
    margin-top: 5px;
   width: 20%;
}
.tit- {
    /* margin-top: 8px; */
    /* margin-bottom: 5px; */
    width: 1876px;
border-bottom: 1px solid #68b7d6;
    float: left;
    height: 39px;
}
.tit-1 {
    width:10%;
  
    /* background: brown; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
   line-height: 20px;
    text-align: center;
}
.tit-4 {
   width: 20%;
    
    /* background: brown; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
   line-height: 20px;
    text-align: center;
}
.tit-5 {
    width:20%;
    
    /* background: brown; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
   line-height: 20px;
    text-align: center;
}
.tit-6 {
    width:20%;
    
    /* background: blueviolet; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
   line-height: 20px;
    text-align: center;
}
.tit-7{
    width:10%;
    
    /* background: blueviolet; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
   line-height: 20px;
    text-align: center;
}
.tit-2 {
    width:10%;
    
    /* background: blueviolet; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
   line-height: 20px;
    text-align: center;
}
.tit-3 {
    text-align: center;
    width: 10%;
    
    /* background: chocolate; */
    float: left;
    height: 39px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00FFF6;
   line-height: 20px;
}
.tit {
    text-indent: 5px;
    margin-top: 10px;
    width: 94%;
    float: left;
    margin-left: 3%;
    /* font-size:20px; */
    line-height: 30px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(133, 188, 241, 1);
    height: 30px;
}
.right1 {
    width: 1900px;
    height: 879px;
    margin-left: 12px;
}


div::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
div::-webkit-scrollbar-track {
    background: rgb(20, 44, 109);
}
div::-webkit-scrollbar-thumb {
    background: #68b7d6;
    border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
    background: rgb(92, 153, 211);
}
div::-webkit-scrollbar-corner {
    background: #179a16;
}





.content2 {
    height: 879px;
    width: 1900px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background: url(../../assets/img/ga.png) no-repeat;
    background-size: 100% 100%;
}
</style>